<!--
 * @Author: boyyang
 * @Date: 2022-01-09 09:56:17
 * @LastEditTime: 2022-01-26 15:56:16
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\drawer\index.vue
-->

<template>
    <div class="drawer-wrapper" @click="maskClick" v-show="isMask">
        <div
            :class="['drawer-content', { 'drawer-h': !props.isShow }]"
            @click.stop
        >{{ props.isShow }}</div>
    </div>
</template>

<script lang="ts" setup>

export interface IDrawerProps {
    isShow?: boolean;
    width?: string | number
}

interface IDrawerEmits {
    (e: 'update:isShow', type: boolean): void
}

const props = withDefaults(defineProps<IDrawerProps>(), {
    isShow: false,
    width: '20vw'
})

const emits = defineEmits<IDrawerEmits>()

// 为了添加消失动画延迟关闭
const isMask = ref<boolean>(false)

watch(() => props.isShow, (newVal, oldVal) => {
    if (newVal) {
        isMask.value = true
    }
})

const maskClick = () => {
    emits('update:isShow', false)
    const timer = setTimeout(() => {
        isMask.value = false
        clearTimeout(timer)
    }, 500);
}

</script>

<style scoped lang="scss">
.drawer-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.5);
    z-index: 99;
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;

    .drawer-content {
        width: v-bind("props.width");
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        right: 0;
        box-shadow: 15px 15px 15px -15px rgba(0, 0, 0, 1);

        transition: all 0.5s linear;

        animation: move 0.5s linear;
    }

    .drawer-h {
        right: -999px;
    }

    @keyframes move {
        0% {
            right: -300px;
        }

        100% {
            right: 0;
        }
    }
}
</style>
